<template>
  <div class="container">
    <el-card class="box-card"style="height: 96vh">
      <el-card class="box-card">
        <div style="width: 2000px;height: 5vh">
          &nbsp;<i class="el-icon-back" style="color: #409EFF;font-size: 30px; float: left;" @click="pathto('/')"></i>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <span style="font-size: 18px">检测地点:</span><el-input v-model="key.username" size="small" placeholder="请输入检测地点" style="width: 10vw;margin-left: 1vw"></el-input>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <el-button type="primary" style="background-color: #409eff" @click="searchIt()"><i class="el-icon-search"></i></el-button>
        </div>
        <br>
      </el-card>
      <el-card class="user-table-card" style="text-align: center;margin-top: 50px;width: 93vw;margin-left: 1vw">
        <el-table
                :data="UserList"
                style="width: 100%"
                stripe
                :row-class-name="tableRowClassName">
          <el-table-column
                  prop="id"
                  label="用户id">
          </el-table-column>
          <el-table-column
                  prop="username"
                  label="检测地点">
          </el-table-column>
          <el-table-column
                  prop="password"
                  label="密码">
            <template slot-scope="scope">
              {{ '•'.repeat(6) }}
            </template>
          </el-table-column>
          <el-table-column
                  prop="bz"
                  label="备注">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div v-if="scope.row.id!== 0">
                <el-button :disabled="scope.row.id===user.id" type="danger" @click="delUser(scope.row)" class="action-button">删除</el-button>
                <el-button style="background-color: #409eff" type="primary" @click="updateit(scope.row)" class="action-button">修改</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-dialog
              title="Dialog Title"
              :visible.sync="flag"
              width="30vw"
              custom-class="custom-dialog">
        <el-form ref="form" :model="formData" label-width="100px">
          <el-form-item label="用id" prop="id">
            <el-input type="text" v-model="formData.id" readonly></el-input>
          </el-form-item>
          <el-form-item label="检测地点" prop="username">
            <el-input type="text" v-model="formData.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="formData.password" @focus="clearPassword"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="bz">
            <el-input type="text" v-model="formData.bz"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button style="background: #409eff" type="primary" @click="updateUser" class="submit-button">提交</el-button>
            <el-button @click="flag = false" class="cancel-button">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>

  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "UserList",
  data() {
    return {
      formData: {},
      flag: false,
      UserList: [],
      key:{},
      loading:false,
      user:{},
      oldList:[],
    };
  },
  methods: {
    Init() {
      axios.get('http://127.0.0.1:5003/userlist').then(res => {
        this.UserList = res.data;
        this.oldList=[...this.UserList];
        console.log(this.UserList);
      });
    },
    searchIt(){
      if (this.key.username === '') {
        this.UserList = [...this.oldList];
        return;
      }
      this.UserList=this.UserList.filter(item=>item.username===this.key.username)
    },
    pathto(url){
      this.$router.push(url)
    },
    updateit(item) {
      this.formData = {...item }; // 使用对象拷贝避免直接修改原数据
      this.flag = true;
    },
    delUser(item) {
      axios.delete('http://127.0.0.1:5003/users/' + item.id).then(res => {
        this.$message.success(res.data.message);
        this.Init();
        this.flag = false;
      });
    },
    updateUser() {
      var config = { headers: { 'Content-Type': 'application/json;charset=UTF-8' } };
      var form = { username: this.formData.username, password: this.formData.password, bz: this.formData.bz };
      axios.put('http://127.0.0.1:5003/users/' + this.formData.id, form, config).then(res => {
        this.$message.success(res.data.message);
        this.formData = {};
        this.flag = false;
        this.Init();
      });
    },
    clearPassword() {
      this.formData.password = '';
    },
    tableRowClassName({ row, rowIndex }) {
      return rowIndex % 2 === 0? 'even-row' : 'odd-row';
    }
  },
  created() {
    this.Init();
    this.user = JSON.parse(sessionStorage.getItem('user'));
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}

.user-table-card {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background-color: #fff;
}

.el-table {
  border-radius: 10px;
  overflow: hidden;
}

.even-row {
  background-color: #f9f9f9;
}

.action-button {
  margin-right: 5px;
  border-radius: 5px;
  padding: 8px 16px;
}

.custom-dialog {
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.submit-button {
  border-radius: 5px;
  padding: 8px 16px;
  margin-right: 10px;
}

.cancel-button {
  border-radius: 5px;
  padding: 8px 16px;
}
</style>
